<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 2000px;
            height: 2000px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: green;

            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>

        // 获取鼠标点击盒子相对盒子的位置

        document.querySelector('.box').onclick = function (e) {
            // 算法：相对距离 = e.pageX 点击位置 - 自己相对body的距离 this.offsetLeft

            let x = e.pageX - this.offsetLeft;
            let y = e.pageY - this.offsetTop;

            console.log(x, y);

            // 如果盒子的外部还有其他盒子：如果没有定位，就是上面的公式（定位父级为body）

            // 如果说盒子的父盒子都有定位：特别麻烦（求没有意义）
            // 一般通过定位实现移动的元素（动画）基本都是独立元素（定位父级一般都是body）

        };
    </script>
</body>

</html>